<template>
  <div>
    <a-button @click="open">点击开始</a-button>
  </div>
</template>

<script lang="ts" setup>
const { open } = useDriver([
  {
    element: '#app > section > header > button.arco-btn',
    popover: {
      title: '菜单展开控制',
      description:
        '这是菜单控制按钮，点击它，可以选择展开|收起菜单；\n当屏幕处于某个临界值时，我们也会自动展开|收起菜单。',
      side: 'bottom',
    },
  },
  {
    element: '#app > section > section .arco-menu-inner',
    popover: {
      title: '菜单',
      description: '这是菜单，在这里可以找到你想要使用|打开的页面。',
    },
  },
  {
    element: '#app > section > header > div.ml-auto > button',
    popover: {
      title: '退出登录',
      description: '当你需要退出或者切换账号的时候，点击它！',
    },
  },
  {
    element: '#app > section > section > main > div',
    popover: {
      title: '最新使用',
      description:
        '这里是你最近打开的任何页面，\n点击任意一个，可以切换到对应页面，并且这是有缓存的，关闭之后不需要担心他会丢失。',
    },
  },
  {
    element: '#app > section > section > main > div > svg',
    popover: {
      title: '刷新',
      description: '点击这个，可以刷新当前页面。',
    },
  },
  {
    element: '#app > section > section > main > div:nth-child(2)',
    popover: {
      title: '当前页面',
      description: '这里展示的是当前使用的页面~\nღ( ´･ᴗ･` )比心',
    },
  },
])
</script>
